<template>
  <el-card>
    <!-- <template #header> 聚类图 </template> -->
    <div :id="id" :class="className" :style="{ height, width }"></div>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { useStore } from "vuex";

const store = useStore();
// 在组件中访问 Vuex store 中的数组
const algoReturnData = ref(store.state.algoReturnData);

const props = defineProps({
  id: {
    type: String,
    default: "scatterChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
});

interface ClusterData {
  [key: string]: number[][];
}

const source = ref<ClusterData>({});
//leibie0为聚类前数据
for (const key in algoReturnData.value) {
  if (key !== "leibie0") {
    source.value[key] = algoReturnData.value[key];
  }
}
// const source = ref<ClusterData>({
//   cluster1: [
//     [3.275154, 2.957587],
//     [1.852435, 3.547351],
//     [2.682252, 4.007573],
//     [2.441611, 0.444826],
//     [4.513623, 3.841029],
//     [1.919901, 4.439368],
//     [3.598143, 1.97597],
//     [3.914654, 3.559303],
//   ],
//   cluster2: [
//     [-3.344465, 2.603513],
//     [-2.078973, 2.552013],
//     [-3.087776, 2.878713],
//     [-0.659487, 3.111284],
//     [-4.822011, 4.607049],
//     [-3.977329, 4.900932],
//     [-1.910108, 4.166946],
//   ],
//   cluster3: [
//     [0.355083, -3.376585],
//     [-0.993756, -0.884433],
//     [-1.565978, -1.256985],
//     [-0.656297, -1.449872],
//     [-1.576936, -2.977622],
//     [-1.79108, -2.184517],
//     [-1.226597, -3.317889],
//   ],
//   cluster4: [
//     [4.567083, -3.376585],
//     [0.678756, -0.884433],
//     [3.345578, -1.256985],
//     [2.656297, -1.449872],
//     [3.458936, -2.977622],
//     [1.23408, -2.184517],
//     [2.259597, -3.317889],
//   ],
// });

const series = Object.keys(source.value).map((key) => ({
  name: key,
  symbolSize: 10,
  data: source.value[key],
  type: "scatter",
}));
const options = {
  xAxis: {},
  yAxis: {},
  series: series,
};
// const options = {
//     xAxis: {},
//     yAxis: {},
//     series: [
//       {
//         symbolSize: 20,
//         data: [
//           ...(source.value as { [key: string]: number[][] }).cluster1,
//           ...(source.value as { [key: string]: number[][] }).cluster2,
//           ...(source.value as { [key: string]: number[][] }).cluster3,
//         ],
//         type: 'scatter'
//       }
//     ]
//   };

const chart = ref<any>("");
onMounted(() => {
  // 图表初始化
  chart.value = markRaw(
    echarts.init(document.getElementById(props.id) as HTMLDivElement)
  );

  chart.value.setOption(options);

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});
</script>
